
<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="logo">进销存管理系统</view>
      <view class="user-info">
        <uni-icons type="person" size="24"></uni-icons>
        <text class="username">管理员</text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 数据概览卡片 -->
      <view class="overview-card">
        <view class="overview-item">
          <text class="overview-value">¥25,689</text>
          <text class="overview-label">今日营业额</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">156</text>
          <text class="overview-label">订单数</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">¥164.5</text>
          <text class="overview-label">客单价</text>
        </view>
      </view>

      <!-- 功能区域 -->
      <view class="function-grid">
        <view class="function-item" v-for="(item, index) in functionList" :key="index">
          <view class="function-icon">
            <uni-icons :type="item.icon" size="32" color="#3a86ff"></uni-icons>
          </view>
          <text class="function-name">{{ item.name }}</text>
        </view>
      </view>

      <!-- 库存预警 -->
      <view class="warning-section">
        <view class="section-header">
          <text class="section-title">库存预警</text>
          <view class="more-btn">
            <text class="more-text">查看更多</text>
            <uni-icons type="right" size="14" color="#666"></uni-icons>
          </view>
        </view>
        <view class="warning-list">
          <view class="warning-item" v-for="(item, index) in warningList" :key="index">
            <view class="warning-info">
              <text class="warning-name">{{ item.name }}</text>
              <text class="warning-stock">库存: {{ item.stock }}</text>
            </view>
            <uni-button size="mini" type="primary">补货</uni-button>
          </view>
        </view>
      </view>

      <!-- 销售趋势 -->
      <view class="sales-section">
        <view class="section-header">
          <text class="section-title">销售趋势</text>
          <view class="date-picker">
            <text>本周</text>
            <uni-icons type="down" size="14" color="#666"></uni-icons>
          </view>
        </view>
        <view class="sales-chart">
          <view class="chart-placeholder">销售趋势图表区域</view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" v-for="(tab, index) in tabs" :key="index">
        <uni-icons :type="tab.icon" size="24" :color="currentTab === index ? '#3a86ff' : '#666'"></uni-icons>
        <text class="tab-name" :class="{ active: currentTab === index }">{{ tab.name }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const currentTab = ref(0);

const tabs = [
  { name: '首页', icon: 'home' },
  { name: '收银', icon: 'wallet' },
  { name: '商品', icon: 'shop' },
  { name: '库存', icon: 'box' },
  { name: '客户', icon: 'person' },
  { name: '报表', icon: 'chart' }
];

const functionList = [
  { name: '收银台', icon: 'wallet' },
  { name: '商品录入', icon: 'plus' },
  { name: '库存查询', icon: 'search' },
  { name: '销售记录', icon: 'list' },
  { name: '客户管理', icon: 'staff' },
  { name: '报表分析', icon: 'chart' },
  { name: '数据备份', icon: 'download' },
  { name: '系统设置', icon: 'settings' }
];

const warningList = [
  { name: '苹果手机', stock: 5 },
  { name: '华为平板', stock: 3 },
  { name: '小米耳机', stock: 8 }
];
</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f6fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.logo {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.username {
  font-size: 14px;
  color: #666666;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 30rpx;
}

.overview-card {
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-value {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.overview-label {
  font-size: 12px;
  color: #999999;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f7ff;
  border-radius: 16rpx;
}

.function-name {
  font-size: 12px;
  color: #666666;
}

.warning-section, .sales-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.more-btn {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.more-text {
  font-size: 12px;
  color: #666666;
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.warning-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff8f8;
  border-radius: 12rpx;
}

.warning-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.warning-name {
  font-size: 14px;
  color: #333333;
}

.warning-stock {
  font-size: 12px;
  color: #ff4d4f;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 12px;
  color: #666666;
}

.chart-placeholder {
  height: 300rpx;
  background-color: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 14px;
  border-radius: 12rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 16rpx 0;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.tab-name {
  font-size: 12px;
  color: #666666;
}

.tab-name.active {
  color: #3a86ff;
}
</style>

